<template>
  <BasicContainer>
    <div class="avue-crud">
      <ElForm :inline="true">
        <ElFormItem>
          <ElButton
            v-if="permissions.problem_cti_add"
            icon="el-icon-plus"
            type="primary"
            @click="addOrUpdateHandle(false)">
            添加
          </ElButton>
        </ElFormItem>
      </ElForm>

      <ElTable
        v-loading="loading"
        border
        :data="deptList"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children' }">
        <ElTableColumn prop="name" label="分类名称" :show-overflow-tooltip="true" />
        <ElTableColumn prop="code" label="分类编号" align="center" />
        <ElTableColumn prop="createTime" label="创建时间" align="center" />
        <ElTableColumn label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <ElButton
              v-if="permissions.problem_cti_add"
              size="small"
              type="text"
              icon="el-icon-plus"
              @click="addOrUpdateHandle(false, scope.row.id)">
              新增
            </ElButton>
            <ElButton
              v-if="permissions.problem_cti_edit"
              size="small"
              type="text"
              icon="el-icon-edit"
              @click="addOrUpdateHandle(true, scope.row.id)">
              修改
            </ElButton>
            <ElButton
              v-if="permissions.problem_cti_del"
              size="small"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)">
              删除
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>

      <TableForm v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
    </div>
  </BasicContainer>
</template>

<script>
  import { delObj, tree } from '@/api/problem/cti'
  import TableForm from './cti-form'
  import { mapState } from 'vuex'

  export default {
    name: 'CtiIndex',
    components: { TableForm },
    data() {
      return {
        addOrUpdateVisible: false,
        // 遮罩层
        loading: true,
        // 表格树数据
        deptList: []
      }
    },
    computed: {
      ...mapState('user', ['permissions']),
      permissionList() {
        return {
          addBtn: this.$isEmpty(this.permissions.problem_cti_add, false),
          delBtn: this.$isEmpty(this.permissions.problem_cti_del, false),
          editBtn: this.$isEmpty(this.permissions.problem_cti_edit, false)
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      async addOrUpdateHandle(isEdit, id) {
        this.addOrUpdateVisible = true
        await this.$nextTick()
        this.$refs.addOrUpdate.init(isEdit, id)
      },
      async getList() {
        this.loading = true
        const response = await tree()
        this.deptList = response.data.data || []
        this.loading = false
      },
      async handleDelete(row) {
        try {
          await this.$confirm(`是否确认删除名称为"${row.name}"的数据项?`, '警告', { type: 'warning' })
          await delObj(row.id)
          await this.getList()
          this.$message.success('删除成功')
        } catch (e) {}
      }
    }
  }
</script>
